<template>
  <!-- 外部数据页面 -->
  <div
    class="externalData"
    v-loading="uploading"
    element-loading-text="文件上传中. . ."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.5)"
  >
    <div class="btn-continer">
      <input
        v-show="false"
        type="file"
        id="fileInput"
        @change="submitUpload"
        :accept="accept"
        name="file"
        ref="file"
        multiple="multiple"
      />
      <el-popover placement="bottom" trigger="click" class="pright">
        <el-button type="primary" icon="el-icon-upload " @click="uploadFn(1)"
          >图片</el-button
        >
        <el-button type="primary" icon="el-icon-upload " @click="uploadFn(4)"
          >音频</el-button
        >
        <el-button type="primary" icon="el-icon-upload " @click="uploadFn(2)"
          >视频</el-button
        >
        <el-button type="primary" icon="el-icon-upload " @click="uploadFn(3)"
          >文本文档</el-button
        >
        <el-button type="primary" icon="el-icon-upload " @click="uploadFn(5)"
          >其他</el-button
        >
        <el-button type="primary" slot="reference" class="btn-lanse"
          ><i class="el-icon-plus el-icon--left">上传</i></el-button
        >
      </el-popover>

      <el-button type="success" class="btn-lvse" @click="submit"
        ><i class="el-icon-upload el-icon--left"> 提交</i></el-button
      >
      <el-button type="danger" class="btn-hongse" @click="delFn"
        ><i class="el-icon-delete el-icon--left"> 删除</i></el-button
      >
      <div class="btn-right">
        <el-button
          icon="el-icon-refresh-right"
          @click="refresh()"
          circle
        ></el-button>
      </div>
    </div>

    <div class="table-continer">
      <el-table
        :data="tableData"
        v-loading="loading"
        @selection-change="selectionchange"
        :header-cell-style="{ background: '#F0F0F6', color: '#2D3548' }"
        style="width: 100%"
      >
        <el-table-column type="selection" width="50"> </el-table-column>
        <el-table-column fixed prop="fileName" label="文件名称">
        </el-table-column>
        <el-table-column prop="fileType" label="文件类型">
          <template slot-scope="scope">
            <span v-if="scope.row.fileType == 1">图片</span>
            <span v-if="scope.row.fileType == 2">视频</span>
            <span v-if="scope.row.fileType == 3">文档</span>
            <span v-if="scope.row.fileType == 4">音频</span>
            <span v-if="scope.row.fileType == 5">其他</span>
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="采集人"> </el-table-column>
        <el-table-column prop="fileTime" label="文档形成时间">
        </el-table-column>

        <el-table-column label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.fileStatus == 1">待提交</span>
            <span v-if="scope.row.fileStatus == 2">待审核</span>
            <span v-if="scope.row.fileStatus == 3">退回</span>
            <span v-if="scope.row.fileStatus == 4">审核通过</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="editClick(scope.row)" type="text" size="small"
              ><i class="el-icon-edit el-icon--left"> 编辑</i></el-button
            >
            <el-button @click="checkView(scope.row)" type="text" size="small"
              ><i class="el-icon-view el-icon--left"> 预览</i></el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="Pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :current-page="currentPage"
        :page-sizes="[5, 10, 15]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize"
      >
      </el-pagination>
    </div>
    <checkimg
      :imgList="imgList"
      :showViewer="showViewer"
      @closeImg="closeImg"
    />
    <confim :dialogVisible="dialogVisible" @submitFn="submitFn" />
    <openPdf ref="Pdf" />
    <openMusci
      :showPlayer="showPlayer"
      :videoPlay="videoPlay"
      @musicClose="musicClose"
    />
    <el-dialog
      title="视频"
      :visible.sync="playVideo"
      width="40%"
      @close="closeMp4"
    >
      <div class="content">
        <openMp4 :video="video" :playVideo="playVideo" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import checkimg from "../components/checkImg.vue";
import confim from "../components/confim.vue";
import openPdf from "../components/openPdf.vue";
import openMp4 from "../components/openMp4.vue";
import openMusci from "../components/openMusci.vue";
import qs from "qs";
export default {
  name: "externalData",
  components: { checkimg, confim, openPdf, openMp4, openMusci },
  data() {
    return {
      showPlayer: false,
      playVideo: false,
      videoPlay: {
        title: "名称",
        artist: "音频",
        src: "",
        pic: "https://moeplayer.b0.upaiyun.com/aplayer/secretbase.jpg",
      },
      video: {
        // 视频播放源
        url: "",
        // 视频海报
        // cover: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png',
        muted: false, // 是否静音播放
        loop: false, // 视频是否循环播放
        preload: "auto", // 视频预加载
        poster: "", // 原生视频默认海报暂不设置
        volume: 1, // 默认音量
        autoplay: false, // 视频自动播放
      },
      uploading: false,
      fileList: [
        {
          id: 1,
          fileName: "测试PDF",
          fileUrl: "http://192.168.3.189/aaa.pdf",
        },
      ],
      url: "http://192.168.3.189/aaa.pdf", //文件地址
      dialogVisible: false,
      currentPage: 1,
      pageSize: 10,
      totalSize: 0,
      accept: "",
      showViewer: false,
      imgList: [],
      tableData: [],
      fileType: null, //文件类型
      selectId: [],
      loading: false,
      fileList: [],
    };
  },
  mounted() {
    this.$nextTick((res) => {});
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      let obj = {
        fileName: "",
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        fileSource: 1,
      };
      this.$api
        .getDataList(obj)
        .then((res) => {
          // console.log(res);
          if (res.code == 200) {
            this.tableData = res.data.content;
            this.totalSize = res.data.totalSize;
          } else {
            this.tableData = [];
            this.totalSize = 0;
          }
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
          this.tableData = [];
          this.totalSize = 0;
        });
    },
    closeImg(flag) {
      this.showViewer = flag;
    },
    delFn() {
      this.dialogVisible = true;
    },
    selectionchange(row) {
      this.selectId = row;
    },
    submit() {
      let arr = [];
      this.selectId.forEach((res) => {
        arr.push(res.id);
      });
      if (this.selectId.length == 0) {
        this.$message({
          showClose: true,
          message: "请选择一条数据进行提交",
          type: "warning",
        });
        return;
      }
      this.$api.submit(arr).then((res) => {
        if (res.code == 200) {
          this.$message.closeAll();
          this.$message({
            showClose: true,
            message: "提交成功",
            type: "success",
          });
          this.currentPage = 1;
          this.getList();
        }
      });
    },
    // 删除回调
    submitFn(flag) {
      // let arr = [];
      // this.selectId.forEach((res) => {
      //   arr.push(res.id);
      // });
      if (flag) {
        if (this.selectId.length == 0) {
          this.$message({
            showClose: true,
            message: "请选择一条数据进行删除",
            type: "warning",
          });
          return;
        }
        this.$api.getDel(this.selectId).then((res) => {
          if (res.code == 200) {
            this.$message.closeAll();
            this.$message({
              showClose: true,
              message: "删除成功",
              type: "success",
            });
            this.currentPage = 1;
            this.getList();
          }
        });
        this.dialogVisible = false;
      } else {
        this.dialogVisible = false;
      }
    },
    //编辑
    editClick(row) {
      this.$router.push({
        name: "externalEdit",
        query: {
          id: row.id,
          type: row.fileType,
        },
      });
    },
    refresh() {
      this.currentPage = 1;
      this.getList();
    },
    checkView(row) {
      this.$api.getUrl({ id: row.id }).then((res) => {
        let type = row.fileType;
        if (type == 1) {
          this.imgList = [CONFIG.url + "/" + res.data];
          this.showViewer = true;
        } else if (type == 3) {
          this.$refs.Pdf.previewFn(CONFIG.url + "/" + res.data);
        } else if (type == 2) {
          this.video.url = CONFIG.url + "/" + res.data;
          this.$nextTick(() => {
            this.playVideo = true;
          });
        } else if (type == 4) {
          this.showPlayer = false;
          let ipUrl = CONFIG.url + "/" + res.data;
          this.$nextTick(() => {
            this.videoPlay.src = ipUrl;
            this.videoPlay.title = "音频";
            this.videoPlay.artist = " ";
            this.showPlayer = true;
          });
        } else {
          this.$message({
            message: "该文件暂不支持预览",
            type: "warning",
          });
        }
      });
    },
    closeMp4() {
      this.$nextTick(() => {
        this.video.url = "obj";
        this.playVideo = false;
      });
    },
    musicClose(flag) {
      let ipUrl = "obj";
      this.$nextTick(() => {
        this.videoPlay.src = ipUrl;
        this.videoPlay.title = "";
        this.videoPlay.artist = "";
        this.showPlayer = flag;
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
      // console.log(`当前页: ${val}`);
    },
    //文件上传
    uploadFn(type) {
      this.fileType = type;
      if (this.fileType == 1) {
        this.accept = "image/*";
      } else if (this.fileType == 2) {
        this.accept = "video/*";
      } else if (this.fileType == 4) {
        this.accept = "audio/*";
      } else if (this.fileType == 3) {
        this.accept = ".pdf, .txt, .xls, .xlsx, .ppt, .doc, .docx";
      } else {
        this.accept = "*";
      }
      setTimeout(() => {
        this.$refs.file.value = "";
        document.getElementById("fileInput").click();
      }, 500);
    },
    submitUpload(e) {
      let fileList = Object.values(e.target.files);
      let arr_box = []; // 数组新容器
      let max = 188743680; // 期望最大加和 180MB为一组
      // let max = 30720 // 期望最大加和 30k为一组
      let newArr = this.getArr(fileList, max, arr_box);
      newArr.forEach((item, index) => {
        this.handleFileChange(item);
      });
    },
    getArr(arr, max, list) {
      let n = 0;
      if (arr.length > 0) {
        arr.map((item, index) => {
          if (item.size + n <= max) {
            if (index == arr.length - 1) {
              list.push(arr);
            }
            n = item.size + n;
          } else if (item.size + n > max) {
            // 单个文件超过最大加和
            this.$message({
              message: item.name + "文件超过最大限制！",
              type: "warning",
            });
          } else {
            list.push(arr.splice(0, index));
            this.getArr(arr, max, list);
          }
        });
      }
      return list;
    },
    //文件上传接口方法
    handleFileChange(file) {
      this.uploading = true;
      let _this = this;
      let formData = new FormData();
      if (file) {
        file.forEach((res, index) => {
          formData.append("multipartFiles", res);
        });
      }

      // return false
      this.$api
        .fileUpload(1, this.fileType, formData)
        .then((res) => {
          if (res.code == 200) {
            this.pageNum = 1;
            this.getList();
            this.$message({
              message: res.msg,
              type: "success",
            });
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
          this.uploading = false;
        })
        .catch((res) => {
          this.uploading = false;
          this.$message({
            message: res.msg,
            type: "error",
          });
        });
    },
  },
};
</script>
<style>
._progress ._time-current,
._progress ._time-amount {
  width: 80px;
}
</style>
<style scoped lang="scss">
.externalData {
  padding: 0 30px;
  overflow: hidden;
  .content {
    height: 520px;
  }
  .pright {
    margin-right: 10px;
  }
  .btn-continer {
    margin-top: 30px;
    margin-bottom: 20px;
    .btn-right {
      float: right;
    }
  }
  .Pagination {
    text-align: right;
    margin-top: 40px;
  }
}
</style>
